<template>
  <div>
    <div class="myOrder">
      <div class="nav">
        <el-tabs
          v-model="activeName"
          @tab-click="statusListHandle"
          v-loading="loading"
        >
          <el-tab-pane label="我的优惠卷" name="0">
            <div class="notUsed" v-if="couponStatusList.length !== 0">
              <!-- <div class="notUsed"> -->
              <div
                class="itemc"
                v-for="item in couponStatusList"
                :key="item.id"
              >
                <div class="box">
                  <div class="content">
                    <div class="page-group">
                      <i class="fold-page"></i>
                      <span class="page">
                        {{ getcouponWay(item.method) }}
                      </span>
                    </div>
                    <div>¥{{ item.methodAmount / 100 }}</div>
                    <div v-if="item.useConditions === -1">无使用限制</div>
                    <div v-else>满{{ item.useConditions / 100 }}元使用</div>
                    <div v-show="false">
                      商品使用限制：{{ item.goodsNames }}
                    </div>
                    <div v-show="false">
                      商品分类使用限制：{{ item.goodsCategoryNames }}
                    </div>
                    <div v-if="false">使用时间 : {{ item.usageTime }}</div>
                    <i class="dot-left"> </i>
                    <i class="dot-right"></i>
                  </div>
                  <div class="footer">
                    <div class="footer-label">
                      有效开始时间 : {{ formatDate(item.validStartDate) }}
                    </div>
                    <div>
                      有效结束时间 : {{ formatDate(item.validEndDate) }}
                    </div>
                  </div>
                  <div class="ribbon">未使用</div>
                </div>
              </div>
            </div>
            <div v-else class="emptyCoupon">
              <el-empty :image-size="200"></el-empty>
            </div>
          </el-tab-pane>
          <el-tab-pane label="领取中心" name="3">
            <div class="notUsed" v-if="couponStatusList.length !== 0">
              <!-- <div class="notUsed"> -->
              <div
                class="itemc"
                v-for="item in couponStatusList"
                :key="item.id"
              >
                <div class="box">
                  <div class="content">
                    <div class="page-group">
                      <i class="fold-page"></i>
                      <span class="page">
                        {{ getcouponWay(item.method) }}
                      </span>
                    </div>
                    <div>¥{{ item.methodAmount / 100 }}</div>
                    <div v-if="item.useConditions === -1">无使用限制</div>
                    <div v-else>满{{ item.useConditions / 100 }}元使用</div>
                    <div v-show="false">
                      商品使用限制：{{ item.goodsNames }}
                    </div>
                    <div v-show="false">
                      商品分类使用限制：{{ item.goodsCategoryNames }}
                    </div>
                    <div v-if="false">使用时间 : {{ item.usageTime }}</div>
                    <el-button
                      class="receive"
                      type="danger"
                      round
                      @click="receiveHandle(item)"
                      >立即领取</el-button
                    >
                    <i class="dot-left"> </i>
                    <i class="dot-right"></i>
                  </div>
                  <div class="footer">
                    <div class="footer-label">
                      有效开始时间 : {{ formatDate(item.startDate) }}
                    </div>
                    <div>有效结束时间 : {{ formatDate(item.endDate) }}</div>
                  </div>
                  <div class="ribbon">待领取</div>
                </div>
              </div>
            </div>
            <div v-else class="emptyCoupon">
              <el-empty :image-size="200"></el-empty>
            </div>
          </el-tab-pane>
          <el-tab-pane label="已使用" name="2">
            <div class="couponUsed" v-if="couponStatusList.length !== 0">
              <!-- <div class="couponUsed"> -->
              <div
                class="itemc"
                v-for="item in couponStatusList"
                :key="item.id"
              >
                <div class="box">
                  <div class="content">
                    <div class="page-group">
                      <i class="fold-page"></i>
                      <span class="page">
                        {{ getcouponWay(item.method) }}
                      </span>
                    </div>
                    <div>¥{{ item.methodAmount / 100 }}</div>
                    <div v-if="item.useConditions === -1">无使用限制</div>
                    <div v-else>满{{ item.useConditions / 100 }}元使用</div>
                    <div v-show="false">
                      商品使用限制：{{ item.goodsNames }}
                    </div>
                    <div v-show="false">
                      商品分类使用限制：{{ item.goodsCategoryNames }}
                    </div>
                    <div>使用时间 : {{ formatDate(item.usageTime) }}</div>
                    <i class="dot-left"> </i>
                    <i class="dot-right"></i>
                  </div>
                  <div class="footer">
                    <div class="footer-label">
                      有效开始时间 : {{ formatDate(item.validStartDate) }}
                    </div>
                    <div>
                      有效结束时间 : {{ formatDate(item.validEndDate) }}
                    </div>
                  </div>
                  <div class="ribbon">已使用</div>
                </div>
              </div>
            </div>
            <div v-else class="emptyCoupon">
              <el-empty :image-size="200"></el-empty>
            </div>
          </el-tab-pane>
          <el-tab-pane label="已过期" name="1">
            <div class="couponUsed" v-if="couponStatusList.length !== 0">
              <!-- <div class="couponUsed"> -->
              <div
                class="itemc"
                v-for="item in couponStatusList"
                :key="item.id"
              >
                <div class="box">
                  <div class="content">
                    <div class="page-group">
                      <i class="fold-page"></i>
                      <span class="page">
                        {{ getcouponWay(item.method) }}
                      </span>
                    </div>
                    <div>¥{{ item.methodAmount / 100 }}</div>
                    <div v-if="item.useConditions === -1">无使用限制</div>
                    <div v-else>满{{ item.useConditions / 100 }}元使用</div>
                    <div v-show="false">
                      商品使用限制：{{ item.goodsNames }}
                    </div>
                    <div v-show="false">
                      商品分类使用限制：{{ item.goodsCategoryNames }}
                    </div>
                    <div v-if="false">使用时间 : {{ item.usageTime }}</div>
                    <i class="dot-left"> </i>
                    <i class="dot-right"></i>
                  </div>
                  <div class="footer">
                    <div class="footer-label">
                      有效开始时间 : {{ formatDate(item.validStartDate) }}
                    </div>
                    <div>
                      有效结束时间 : {{ formatDate(item.validEndDate) }}
                    </div>
                  </div>
                  <div class="ribbon">已过期</div>
                </div>
              </div>
            </div>
            <div v-else class="emptyCoupon">
              <el-empty :image-size="200"></el-empty>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="pageing">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="9"
          layout="total, prev, pager, next, jumper"
          :total="total"
          :hide-on-single-page="couponTotalPage === 1 || couponTotalPage === 0"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {
  QueryCouponStatusList,
  ReceiveCouponList,
  ReceiveCouponHandle,
} from "@/api/mallApi/congLinMall/personalcenter";
export default {
  name: "PersonalCenterCoupon",
  components: {},
  data() {
    return {
      loading: false,
      activeName: 0,
      currentPage: 1,
      hidePage: false,
      couponStatusList: [
        {
          couponName: "水杯", //优惠卷名称
          useConditions: 1000, //使用条件
          method: 0, //0：固定金额 1：打折
          methodAmount: 123, //折扣金额
          validStartDate: "2023-03-01", //有效开始时间
          validEndDate: "2023-03-31", //有效结束时间
          usageTime: "2023-03-11", //使用时间
          goodsNames: "111", //商品使用限制
          goodsCategoryNames: "商品分类使用限制", //商品分类使用限制
        },
        {
          couponName: "水杯", //优惠卷名称
          useConditions: 1000, //使用条件
          method: 0, //0：固定金额 1：打折
          methodAmount: 123, //折扣金额
          validStartDate: "2023-03-01", //有效开始时间
          validEndDate: "2023-03-31", //有效结束时间
          usageTime: "2023-03-11", //使用时间
          goodsNames: "111", //商品使用限制
          goodsCategoryNames: "商品分类使用限制", //商品分类使用限制
        },
        {
          couponName: "水杯", //优惠卷名称
          useConditions: 1000, //使用条件
          method: 0, //0：固定金额 1：打折
          methodAmount: 123, //折扣金额
          validStartDate: "2023-03-01", //有效开始时间
          validEndDate: "2023-03-31", //有效结束时间
          usageTime: "2023-03-11", //使用时间
          goodsNames: "111", //商品使用限制
          goodsCategoryNames: "商品分类使用限制", //商品分类使用限制
        },
        {
          couponName: "水杯", //优惠卷名称
          useConditions: 1000, //使用条件
          method: 0, //0：固定金额 1：打折
          methodAmount: 123, //折扣金额
          validStartDate: "2023-03-01", //有效开始时间
          validEndDate: "2023-03-31", //有效结束时间
          usageTime: "2023-03-11", //使用时间
          goodsNames: "111", //商品使用限制
          goodsCategoryNames: "商品分类使用限制", //商品分类使用限制
        },
        {
          couponName: "水杯", //优惠卷名称
          useConditions: 1000, //使用条件
          method: 0, //0：固定金额 1：打折
          methodAmount: 123, //折扣金额
          validStartDate: "2023-03-01", //有效开始时间
          validEndDate: "2023-03-31", //有效结束时间
          usageTime: "2023-03-11", //使用时间
          goodsNames: "111", //商品使用限制
          goodsCategoryNames: "商品分类使用限制", //商品分类使用限制
        },
        {
          couponName: "水杯", //优惠卷名称
          useConditions: 1000, //使用条件
          method: 0, //0：固定金额 1：打折
          methodAmount: 123, //折扣金额
          validStartDate: "2023-03-01", //有效开始时间
          validEndDate: "2023-03-31", //有效结束时间
          usageTime: "2023-03-11", //使用时间
          goodsNames: "111", //商品使用限制
          goodsCategoryNames: "商品分类使用限制", //商品分类使用限制
        },
        {
          couponName: "水杯", //优惠卷名称
          useConditions: 1000, //使用条件
          method: 0, //0：固定金额 1：打折
          methodAmount: 123, //折扣金额
          validStartDate: "2023-03-01", //有效开始时间
          validEndDate: "2023-03-31", //有效结束时间
          usageTime: "2023-03-11", //使用时间
          goodsNames: "111", //商品使用限制
          goodsCategoryNames: "商品分类使用限制", //商品分类使用限制
        },
      ],
      statusCoupon: 0,
      total: 0,
      couponTotalPage: 1,
      tabName: "0",
    };
  },
  methods: {
    ReceiveCouponListone() {
      const data = {
        pageSize: 9,
        pageNo: this.currentPage,
      };
      this.loading = true;
      ReceiveCouponList(data)
        .then((res) => {
          if (res.code !== "00000") return;
          console.log("优惠卷领取中心", res);
          this.loading = false;
          this.couponStatusList = res.data.list;
          this.total = parseInt(res.data.total);
          this.couponTotalPage = res.data.pages;
        })
        .catch((err) => {
          // console.log("err", err);
          this.couponStatusList = [];
          this.loading = false;
        });
    },
    receiveHandle(item) {
      // console.log(item);
      //调取 领取功能按钮接口 调完 刷新 列表接口 load
      const data = {
        couponId: item.id,
      };
      ReceiveCouponHandle(data)
        .then((res) => {
          // console.log(res);
          if (res.code !== "00000") return;
          this.ReceiveCouponListone();
          this.$message({
            message: "领取优惠卷成功",
            type: "success",
          });
        })
        .catch((err) => {
          // console.log(err);
        });
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      //   console.log(`当前页: ${val}`);
      this.currentPage = val;
      if (
        this.tabName === "0" ||
        this.tabName === "1" ||
        this.tabName === "2"
      ) {
        this.statusCoupon = this.tabName;
        this.getCouponList();
      } else if (this.tabName === "3") {
        this.ReceiveCouponListone();
        //这个地方调取 可以领取的优惠卷列表接口
        // this.couponStatusList = [];
      }
    },
    statusListHandle(e) {
      this.tabName = e.name;
      this.couponStatusList = [];
      if (
        this.tabName === "0" ||
        this.tabName === "1" ||
        this.tabName === "2"
      ) {
        this.statusCoupon = this.tabName;
        this.currentPage = 1;
        this.getCouponList();
      } else if (this.tabName === "3") {
        this.currentPage = 1;
        this.ReceiveCouponListone();
        //这个地方调取 可以领取的优惠卷列表接口
        // this.couponStatusList = [];
      }
    },
    getCouponList() {
      const data = {
        status: this.statusCoupon, //状泰-1 无门槛优惠券0 未使用1 已过期2 已使用3 已被分享领取
        pageSize: 9,
        pageNo: this.currentPage,
      };
      this.loading = true;
      QueryCouponStatusList(data)
        .then((res) => {
          if (res.code !== "00000") return;
          // console.log("resres", res);
          this.loading = false;
          this.couponStatusList = res.data.rows;
          this.total = res.data.totalRows;
          this.couponTotalPage = res.data.totalPage;
        })
        .catch((err) => {
          // console.log("err", err);
          this.loading = false;
        });
    },
    formatDate(originalTimeString) {
      if (!originalTimeString) {
        return ""; // or any default value you prefer
      }
      const [datePart, timePart] = originalTimeString.split(" ");
      const [year, month, day] = datePart.split("-");
      return `${year}.${month}.${day}`;
    },
    getcouponWay(type) {
      switch (type) {
        case 0:
          return "金额卷";
        case 1:
          return "折扣卷";
        default:
          return "未知";
      }
    },
    // a() {},
  },
  computed: {},
  mounted() {
    this.getCouponList();
  },
  created() {},
};
</script>

<style lang="scss" scoped>
.myOrder {
  user-select: none;
  list-style: none;
  box-sizing: border-box;
  width: 1010px;
  height: auto;
  background: #fff;

  .nav {
    margin-top: 20px;
    margin-left: 20px;
    width: 95%;
    // height: 62px;
  }

  .notUsed {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    color: red;
    // justify-content: space-around;

    //   优惠卷样式
    .itemc {
      width: 250px;
      overflow: hidden;
      margin-bottom: 10px;
      padding-left: 2px;
      position: relative;
      margin-left: 60px;
      cursor: pointer;
    }
    .box {
      background: #fff;
      border-radius: 5px;
      // background: linear-gradient(45deg, orange, red);
      background-color: #fae8e6;
    }

    .itemc .dot-left,
    .itemc .dot-right {
      display: block;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #f5f5f5;
      position: absolute;
      z-index: 999;
    }
    .itemc .dot-left {
      bottom: -8px;
      left: -6px;
    }
    .itemc .dot-right {
      bottom: -8px;
      right: -6px;
    }
    .itemc .page-group {
      position: absolute;
      top: 10px;
      left: -2px;
      width: 100%;
      max-width: 120px;
    }
    .itemc .page-group .fold-page {
      display: block;
      width: 2px;
      height: 5px;
      background: #db0113;
      //   background-color: #7cd1d4;
      transform: skewY(-40deg);
      position: absolute;
      top: -1px;
      left: 0;
      z-index: 0;
    }
    .itemc .page-group .page {
      position: absolute;
      z-index: 1;
      display: block;
      padding: 0 10px;
      height: 20px;
      background: linear-gradient(137deg, #ff5b5b 0%, #db0113 100%);
      // background-color: #7cd1d4;
      border-radius: 0 20px 20px 0;
      color: #fff;
      text-align: center;
      font-size: 12px;
      overflow: hidden;
    }
    .itemc .content {
      width: 100%;
      height: 200px;
      border-bottom: 5px dotted #f5f5f5;
      position: relative;
      z-index: 2;
      position: relative;
    }
    .itemc .content > div:nth-child(2) {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: 40px;
      font-size: 40px;
    }
    .itemc .content > div:nth-child(3) {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: 100px;
      font-size: 16px;
    }
    .itemc .content > div:nth-child(4) {
      position: absolute;
      font-size: 12px;
      left: 15px;
      bottom: 30px;
    }
    .itemc .content > div:nth-child(5) {
      position: absolute;
      font-size: 12px;
      left: 15px;
      bottom: 10px;
    }
    .itemc .content > div:nth-child(6) {
      position: absolute;
      font-size: 12px;
      left: 15px;
      bottom: 50px;
    }
    .itemc .content .receive {
      position: absolute;
      font-size: 12px;
      left: 50%;
      transform: translateX(-50%);
      bottom: 20px;
    }
    .itemc .footer {
      color: red;
      font-size: 12px;
      padding: 5px 15px 10px 15px;
    }
    .footer-label {
      line-height: 24px;
    }
    .itemc .ribbon {
      width: 80px;
      height: 20px;
      background: #dd0d1f;
      position: absolute;
      right: -20px;
      top: 10px;
      transform: rotateZ(45deg);
      text-align: center;
      color: #fff;
      font-size: 12px;
    }
  }
  .couponUsed {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    color: #fff;
    // justify-content: space-around;

    //   优惠卷样式
    .itemc {
      width: 250px;
      overflow: hidden;
      margin-bottom: 10px;
      padding-left: 2px;
      position: relative;
      margin-left: 60px;
      cursor: pointer;
    }
    .box {
      background: #fff;
      border-radius: 5px;
      //   background: linear-gradient(45deg, orange, red);
      background-color: #c3c3c3;
    }

    .itemc .dot-left,
    .itemc .dot-right {
      display: block;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #f5f5f5;
      position: absolute;
      z-index: 999;
    }
    .itemc .dot-left {
      bottom: -8px;
      left: -6px;
    }
    .itemc .dot-right {
      bottom: -8px;
      right: -6px;
    }
    .itemc .page-group {
      position: absolute;
      top: 10px;
      left: -2px;
      width: 100%;
      max-width: 120px;
    }
    .itemc .page-group .fold-page {
      display: block;
      width: 2px;
      height: 5px;
      //background: #db0113;
      background-color: #fff;
      transform: skewY(-40deg);
      position: absolute;
      top: -1px;
      left: 0;
      z-index: 0;
    }
    .itemc .page-group .page {
      position: absolute;
      z-index: 1;
      display: block;
      padding: 0 10px;
      height: 20px;
      // background: linear-gradient(137deg, #ff5b5b 0%, #db0113 100%);
      background-color: #525151;
      border-radius: 0 20px 20px 0;
      color: #fff;
      text-align: center;
      font-size: 12px;
      overflow: hidden;
    }
    .itemc .content {
      width: 100%;
      height: 200px;
      border-bottom: 5px dotted #f5f5f5;
      position: relative;
      z-index: 2;
    }
    .itemc .content > div:nth-child(2) {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: 40px;
      font-size: 40px;
    }
    .itemc .content > div:nth-child(3) {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: 100px;
      font-size: 16px;
    }
    .itemc .content > div:nth-child(4) {
      position: absolute;
      font-size: 12px;
      left: 15px;
      bottom: 30px;
    }
    .itemc .content > div:nth-child(5) {
      position: absolute;
      font-size: 12px;
      left: 15px;
      bottom: 10px;
    }
    .itemc .content > div:nth-child(6) {
      position: absolute;
      font-size: 12px;
      left: 15px;
      bottom: 10px;
    }
    .itemc .footer {
      color: #fff;
      font-size: 12px;
      padding: 5px 15px 10px 15px;
    }
    .footer-label {
      line-height: 24px;
    }
    .itemc .ribbon {
      width: 80px;
      height: 20px;
      // background: #dd0d1f;
      background-color: #525151;
      position: absolute;
      right: -20px;
      top: 10px;
      transform: rotateZ(45deg);
      text-align: center;
      color: #fff;
      font-size: 12px;
    }
  }
  .emptyCoupon {
    display: flex;
    align-items: center;
    justify-content: space-around;
    text-align: center;
  }
  .pageing {
    margin-top: 40px;
    margin-left: 20px;
    width: 95%;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
}
</style>
